<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 引入样式 -->
<!--    <link rel="stylesheet" href="../elementUI.css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../base.css">
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body style="overflow:scroll;overflow-x:hidden">
<div id="app">
    <el-row>
        <el-col :span="4">
            <el-row>
                <el-col :span="24">
                    <el-menu
                            default-active="3-4"
                            class="el-menu-vertical-demo"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            unique-opened="true" style="height: 100vh;">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item index="1-1" @click="toUserSummary(1)">用户汇总</el-menu-item>
                            <el-menu-item index="1-2" @click="toUserSummary(2)">用户资料</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>微博管理</span>
                            </template>
                            <el-menu-item index="2-1" @click="toUserSummary(3)">微博标签</el-menu-item>
                            <el-menu-item index="2-2" @click="toUserSummary(4)">微博列表</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>系统设置</span>
                            </template>
                            <el-menu-item index="3-1" @click="toUserSummary(5)">宠物类型</el-menu-item>
                            <el-menu-item index="3-2" @click="toUserSummary(6)">举报原因</el-menu-item>
                            <el-menu-item index="3-3" @click="toUserSummary(7)">转发文字</el-menu-item>
                            <el-menu-item index="3-4" @click="toUserSummary(8)">角色管理</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>
        </el-col>


        <el-col :span="20">
            <el-row style="background-color: #545c64;line-height: 50px">
                <el-col :offset="22">
                    <span style="color: #FFD04B">{{user.username}}</span>
                    <a style="color: #FFD04B" @click="out" href="#">退出</a>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" style="height: 93vh;">
                    <iframe :src="pageurl" frameborder="0" height="100%" width="100%" scrolling="auto"></iframe>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</div>
</body>
<!-- 先引入 Vue -->
<script src="../vue.js"></script>
<!-- 引入组件库 -->
<script src="../elementUI.js"></script>
<!-- vue ajax插件 -->
<script src="../axios.min.js"></script>
<script>
    var v = new Vue({
        el: '#app',
        data: {
            user: {},
            pageurl: 'role.html'
        },
        created: function () {
            var that = this;
            axios.defaults.withCredentials = true;
            axios.get('http://39.105.59.232/manage/user')
                .then(function (response) {
                    if (response.data.code == 200) {
                        that.user = response.data.data;
                    } else {
                        that.$alert("获取session失败", "提示");
                    }
                })
        },
        methods: {
            out: function () {
                var that = this;
                axios.defaults.withCredentials = true;
                axios.get('http://39.105.59.232/manage/out')
                    .then(function (response) {
                        if (response.data.code == 200) {
                            window.open("login.html", "_self");
                        } else {
                            that.$alert("退出用户失败", "提示");
                        }
                    })
            },
            toUserSummary: function (id) {
                if (id == '1') {
                    this.pageurl = 'userSummary.html'
                } else if (id == '2') {
                    this.pageurl = 'userList.html'
                } else if (id == '5') {
                    this.pageurl = 'petType.html'
                }else if(id=='6'){
                    this.pageurl = 'informCause.html'
                }else if(id=='7'){
                    this.pageurl = 'shareText.html'
                }else if(id=='8'){
                    this.pageurl = 'role.html'
                }

            }
        }
    })
</script>
</html>